import { Menu } from 'antd';
import { AppstoreOutlined } from '@ant-design/icons';

function getItem(label: any, key: any, icon: any, children: any) {
  return {
    key,
    icon,
    children,
    label,
  };
}

const items = [
  getItem('About JSON', 'sub1', <AppstoreOutlined />, [
    getItem('Excel To JSON', 'Excel2JSON', '', null),
    getItem('JSON Format', 'JSONFormat', '', null),
  ]),
]; // submenu keys of first level

const rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];

const AppMenu = (props: any) => {
  const { openKeys, setOpenKeys, setCurrentClickedKey } = props;

  const onOpenChange = (keys: any) => {
    const latestOpenKey = keys.find((key: any) => openKeys.indexOf(key) === -1);

    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

  const handleMenuClick = (e: any) => {
    const { key } = e;
    setCurrentClickedKey(key);
  };
  return (
    <Menu
      mode="inline"
      openKeys={openKeys}
      onOpenChange={onOpenChange}
      defaultSelectedKeys={['Excel2JSON']}
      onClick={(e) => handleMenuClick(e)}
      style={{
        width: 256,
      }}
      items={items}
    />
  );
};

export default AppMenu;
